<template>
  <!-- 模板，html -->
  <div class="hospital_map">
    <div class="butt">
      <el-button @click="toHospital" class="searchBtn" type="primary"
        >返回</el-button
      >
    </div>
    <!-- 地图渲染的容器 -->
    <div id="container_hospital"></div>
  </div>
</template>
<script>
// 脚本，js
export default {
  data() {
    return {
      position: [116.397428, 39.90923],
    };
  },
  methods: {
    toHospital() {
      // this.$router.push({
      //   path: "/hospital",
      // });
      this.$router.go(-1);
      // this.destroyed()
    },
    // destroyed() {
    //   this.map.destroy();
    //   this.map = null;
    //   // this.mapModule.dispose();
    //   this.mapModule = null;
    //   // console.log("==================destroyed==================");
    // },
  },

  created() {
    // 获取医院的经纬度
    let { longitude, latitude } = this.$route.query;
    this.position = [+longitude, +latitude];
  },

  // dom追加到网页中
  mounted() {
    var map = new AMap.Map("container_hospital", {
      zoom: 11, //级别
      center: this.position,
      viewMode: "3D", //使用3D视图
    });
    // 创建一个 Marker 实例：
    var marker = new AMap.Marker({
      position: this.position,
      title: this.$route.query.name,
    });

    // 将创建的点标记添加到已有的地图实例：
    map.add(marker);
  },
};
</script>

<style scoped>
/* 样式，css */
#container_hospital {
  height: 600px;
}
</style>